<{extend name="base" /}>
    <{block name="body" }>
        <div class="layui-body ">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="">
                        <a href="<{:url('admin/sogou/index')}>">已添加列表</a>
                    </li>
                    <li>
                        <a href="<{:url('admin/sogou/create',['style_id'=>1])}>">样式一</a>
                    </li>
                    <li>
                        <a href="<{:url('admin/sogou/create',['style_id'=>2])}>">样式二</a>
                    </li>
                    <li >
                        <a href="<{:url('admin/sogou/create',['style_id'=>3])}>">样式三</a>
                    </li>
                    <li class="layui-this">
                        <a>样式四</a>
                    </li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" id="app">
                        <div class="left">
                            <form class="layui-form" method="post" action="<{:url('admin/sogou/save')}>">
                                <input type="hidden" name="style" value="4">
                                <{php}>
                                if(request()->action() == 'edit'){
                                    echo '<input type="hidden" name="type" value="edit">';
                                    echo '<input type="hidden" name="id" value="'.request()->get('id').'">';
                                }
                                <{/php}>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">标题</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[title]" lay-verify="required" v-model='Btitle' placeholder="{用此符号可飘红，支持多个} 必须成对书写" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[tel]" v-model="Btel" lay-verify="required" placeholder="例如：001-8888888" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="right" id="sogou-search">
                            <link rel="stylesheet" href="/sogou/css/style.css" />
                            <div class="vrResult" id="sogou_vr_70119001_1">
                                <h3 class="vr-tit">
                                    <a class="resultLink" :href="Ctel" v-html="Ctitle"></a>
                                </h3>
                                <div class="vr-call161114">
                                    <div href="javascript:void(0)" class="img-flex img-small">
                                        <div class="img-layout">
                                            <i class="img-height">
                                                <img src=""
                                                    alt="">
                                            </i>
                                        </div>
                                        <div class="text-layout">
                                            <p class="clamp2">
                                                <span>官方客服提示：</span> 由
                                                <a href="">搜狗号码通</a>认证为官方电话 </p>
                                        </div>
                                    </div>
                                    <ul class="call-list">
                                        <li class="space-default">
                                            <a :href="Ctel" class="btn-default">统一客服电话：
                                                <span v-text="Dtel"></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <{/block}>
            <{block name="script" }>
                <style type="text/css">
                    .left,
                    .right {
                        float: left;
                    }

                    .left {
                        width: 60%;
                    }

                    .right {
                        height: 550px;
                        margin-left: 60px;
                        width: 300px;
                        border: 2px solid #ccc;
                        border-radius: 20px;
                        padding: 20px;
                        background: #f1f1f1;
                        box-shadow: 1px 2px #eeeeee5c;
                        overflow-y: scroll;
                    }

                    .right::-webkit-scrollbar {
                        display: none;
                    }
                </style>
                <script src="/static/js/vue.js"></script>
                <script type="text/javascript">
                    var vue = new Vue({
                        el: "#app",
                        data: {
                            Btitle: '',
                            Btel: '',
                        },
                        computed: {
                            Ctitle: function () {
                                if (this.Btitle == '') {
                                    return '中国<em>移动客服</em>电话';
                                }
                                return this.Btitle.replace(/{/g, '<em>').replace(/}/g, '</em>');
                            },
                            Ctel: function () {
                                return 'tel:' + this.Btel;
                            },
                            Dtel:function(){
                                if (this.Btel == '') {
                                    return '010-8888888';
                                }
                                return this.Btel;
                            }
                        }
                    });

                     <{php}>
                        if(request()->action() == 'edit'){

                            echo "vue.Btitle = '".$data['content']['title']."';";
                            echo "vue.Btel = '".$data['content']['tel']."';";

                        }
                    <{/php}>
                </script>
                <{/block}>